<template>
  <div class="function-box">
    <div class="function-box__search">
      <div class="search-input">
        <el-select v-model="value" placeholder="请选择" style="width: 120px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="keyword"
          placeholder="请输入内容"
          style="width: 180px"
        ></el-input>
        <span class="reserve-btn">重置</span>
        <span class="search-btn">检索</span>
      </div>
      <div class="add-btn" @click="openRoleModel(1)">
        <span><i class="el-icon-plus" />新建角色</span>
      </div>
    </div>
    <el-table
      max-height="734"
      :data="tableData"
      style="
        width: 100%;
        margin-top: 12px;
        background-color: #303136;
        color: #ffff;
      "
      :border="false"
    >
      <el-table-column prop="sort" label="序号"> </el-table-column>
      <el-table-column prop="name" label="角色名"> </el-table-column>
      <el-table-column prop="remark" label="角色备注"> </el-table-column>
      <el-table-column prop="menus" label="菜单权限">
        <template slot="scope"></template>
      </el-table-column>

      <el-table-column prop="isDisable" label="状态">
        <template slot-scope="scope">
          <span style="color: #3ad76e" v-if="scope.row.isDisable == 1"
            >启用</span
          >
          <span style="color: #e6873a" v-else>禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>

      <el-table-column prop="updateTime" label="最后更新时间">
      </el-table-column>
      <el-table-column prop="opration" label="操作">
        <template slot-scope="scope">
          <span class="opration-btn" @click="openRoleModel(2, scope.row)"
            >查看</span
          >
          <span
            class="opration-btn"
            @click="handleClick(0, scope.row)"
            v-if="scope.row.isDisable == 1"
            >禁用</span
          >
          <span
            class="opration-btn"
            @click="handleClick(1, scope.row)"
            v-if="scope.row.isDisable == 0"
            >启用</span
          >
          <span class="opration-btn" @click="openRoleModel(3, scope.row)"
            >编辑</span
          >
          <span class="opration-btn" @click="openAuthorityModel(scope.row)"
            >权限赋予</span
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="table-pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="pageSizeArr"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>

    <el-dialog
      :append-to-body="true"
      title="权限赋予"
      :visible.sync="dialogVisible"
      @close="closeAuthModel"
    >
      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="权限控制" name="authority">
          <authority-component
            :roleId="currentRole.id"
            :modeType="1"
            v-if="dialogVisible"
            @onClose="closeModel"
          ></authority-component>
        </el-tab-pane>

        <el-tab-pane label="角色成员" name="role">
          <role-component
            :roleId="currentRole.id"
            v-if="dialogVisible"
          ></role-component>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <el-dialog
      :append-to-body="true"
      :title="roleTitle"
      :visible.sync="roleSetVisible"
      width="35%"
    >
      <role-setting
        v-if="roleSetVisible"
        :modeType="modeType"
        :roleInfo="currentRole"
        @onClose="closeModel"
      ></role-setting>
    </el-dialog>
  </div>
</template>

<script>
import AuthorityComponent from "./AuthorityComponent.vue";
import RoleComponent from "./RoleComponent.vue";
import RoleSetting from "./RoleSetting.vue";
import { getRoleList, editRole } from "@/api/role";
export default {
  components: {
    AuthorityComponent,
    RoleComponent,
    RoleSetting,
  },
  data() {
    return {
      dialogVisible: false,
      activeName: "authority",
      keyword: "",
      options: [
        {
          value: "1",
          label: "角色名",
        },
      ],
      value: "",
      tableData: [],

      pageNo: 1,
      pageSize: 10,
      totalCount: 0,
      pageSizeArr: [10, 20, 30, 40, 50, 60],
      roleTitle: "新增角色",
      roleSetVisible: false,
      currentRole: {},
      modeType: 0,
    };
  },

  mounted() {
    this.getRoleList();
  },

  methods: {
    closeModel(e) {
      this.roleSetVisible = false;
      this.dialogVisible = false;
      if (e.isClose) {
        this.pageNo = 1;
        this.tableData = [];
        this.getRoleList();
      }
    },
    openRoleModel(type, data = {}) {
      this.modeType = type;
      this.roleSetVisible = true;

      if (type == 1) {
        this.roleTitle = "新增角色";
      } else if (type == 2) {
        this.roleTitle = "角色信息";
        this.currentRole = {...data,type};
      } else {
        this.roleTitle = "编辑角色";
        this.currentRole = {...data,type};
      }
    },
    async getRoleList() {
      let result = await getRoleList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      });

      if (result.code == 200) {
        this.tableData = Array.from(
          new Set([...this.tableData, ...result.data.lists])
        );

        this.totalCount = result.data.count;
      }
    },

    handleSizeChange(e) {
      this.pageSize = e;
      this.pageNo = 1;
      this.tableData = [];
      this.getRoleList();
    },
    handleCurrentChange(e) {
      this.pageNo = e;
      this.tableData = [];
      this.getRoleList();
    },
    //启动禁用角色
    async handleClick(type, data) {
      let index = this.tableData.findIndex((item) => item.id == data.id);
      this.tableData[index]["isDisable"] = type;
      await editRole({
        id: data.id,
        name: data.name,
        menuIds: "12", //data.menuIds.join(","),
        remark: data.remark,
        sort: data.sort,
        isDisable: type,
      });
    },
    //权限弹窗
    openAuthorityModel(data) {
      console.log(data);
      this.dialogVisible = true;
      this.currentRole = data;
    },

    handleTabClick(e) {
      this.activeName = e._props.name;
    },

    closeAuthModel() {
      this.dialogVisible = false;
      this.activeName = "authority";
    },
  },
};
</script>

<style lang="scss" scoped>
.add-btn {
  width: 112px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  color: #17181a;
  background: #5cfbff;
  border-radius: 4px;
  margin-left: 16px;
  cursor: pointer;
}
.function-box {
  width: 100%;
  // background: #1d1d20;
  &__search {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 0;
    .search-input {
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        width: 88px;
        height: 36px;
        text-align: center;
        line-height: 36px;
        border-radius: 4px;
        margin-left: 24px;
        cursor: pointer;
      }

      .search-btn {
        background: #5cfbff;
        color: #17181a;
      }

      .reserve-btn {
        border: 1px solid #5cfbff;
        color: #5cfbff;
      }
    }
  }
}
.opration-btn {
  display: inline-block;
  color: #fff;
  background: #40414d;
  border-radius: 4px;
  cursor: pointer;
  padding: 6px 12px;
  margin-top: 10px;
  margin-right: 10px;
}
// opration-btn {
//   display: inline-block;
//   width: 52px;
//   height: 32px;
//   text-align: center;
//   line-height: 32px;
//   color: #fff;
//   background: #40414d;
//   border-radius: 4px;
//   cursor: pointer;
// }
.table-pagination {
  width: 100%;
  text-align: right;
  padding: 30px 0;
  box-sizing: border-box;
}
</style>

<style>
.el-tabs__nav-wrap::after {
  background: #303135;
}
.el-dialog__title,
.el-tabs__item {
  color: #fff;
}
.el-tabs__item.is-active,
.el-tabs__item:hover {
  color: #5cfbff;
}
.el-tabs__active-bar {
  background: #5cfbff;
}
</style>